<template>
  <div class="yz_nav">
    <div class="container">
      <el-menu :default-active="activeIndex" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" class="el-menu-demo" mode="horizontal" @select="handleSelect" router='router'>
        <el-menu-item index="/page/about/about1">关于我们</el-menu-item>
        <el-menu-item index="/page/project/project1">服务项目</el-menu-item>
        <el-menu-item index="/page/news/all">新闻资讯</el-menu-item>
        <el-menu-item index="/">首页</el-menu-item>
      </el-menu>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  data() {
    return {
      router: true
    }
  },
  computed: {
    ...mapState(['activeIndex'])
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
      this.$store.state.activeIndex=key;
    }
  },
  mounted() {
    
  }
}

</script>
<style lang='scss'>
.yz_nav {
  border-bottom: 0;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  background-color: #545C64;
  .container {
    max-width: 1170px;
    margin: 0 auto;
    .el-menu--horizontal {
      border-bottom: 0;
    }
  }
}

.el-menu--horizontal>.el-menu-item,
.el-menu--horizontal>.el-submenu {
  float: right!important;
}

.nav_active {
  color: rgb(255, 208, 75);
  border-bottom-color: rgb(255, 208, 75);
  background-color: rgb(84, 92, 100);
}

</style>
